﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid plugin</title>

<link rel="stylesheet" href="../../../global/css/assets/style.css"/>
<link rel="stylesheet" href="../../../global/css/assets/sortable-theme-bootstrap.css" />
<link rel="stylesheet" href="../../../global/css/assets/laydate.css" />
<link rel="stylesheet" href="../../../framework/assets/css/bootstrap.min.css" />

<link rel="stylesheet" href="../../../framework/assets/css/bootstrapDatepickr-1.0.0.css" />
<link rel="stylesheet" href="../../../framework/assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../../framework/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="../../../framework/assets/css/ace.min.css" />
</head>
<body>
	<div class="right_main">
    	<div class="homepost">
        	<span>系统管理>表格>jqGrid plugin</span>
        </div>
        <div class="width_98per">
			<div class="m_searinp">

				<ul class="firstsy clearfix">
                    <li class="clearfix">
						<span class="li_mssms">注册开始日期：</span>
						<input type="text" id="calendar"  class="allinp">
					</li>
                    <li class="clearfix">
						<span class="li_mssms">注册结束日期：</span>
						<input type="text" id="calendar1"  class="allinp">
					</li>
					<li class="clearfix">
                        <span class="li_mssms">用户名：</span>
                        <input name="" type="text" class="allinp" />
                    </li>
                    <li class="clearfix">
                        <span class="li_mssms">手机号码：</span>
                        <input name="" type="text" class="allinp" />
                    </li>
                    <li class="clearfix">
                        <span class="li_mssms">推荐码：</span>
                        <input name="" type="text" class="allinp" />
                    </li>
                    <li class="clearfix">
                        <span class="li_mssms">真实姓名：</span>
                        <input name="" type="text" class="allinp" />
                    </li>
                    <li class="clearfix">
                        <span class="li_mssms">身份证号码：</span>
                        <input name="" type="text" class="allinp" />
                </ul>
			</div>
           	<div class="founctionbt">
                <ul class="nei clearfix">
                	<li><a class="serc">查询</a></li>
                	<li><a class="refreshs">重置</a></li>
                    <li><a class="serc">查看</a></li>
                    <li><a class="execlout">下载Excel</a></li> 
                    <li><a class="add">新增</a></li>
                    <li><a class="del">删除</a></li>
                </ul>
            </div>
			<div class="main-container main-container2" id="main-container">
			<div class="row">
				<div class="col-xs-12">
					<table id="grid-table"></table>

					<div id="grid-pager"></div>

					<script type="text/javascript">
						var $path_base = "/";
					</script>
				</div>
			</div>

		</div>
	</div>
</div>
<div class="mosd2">
        <!--查询开始-->
        <div class="cha_query" >
        	<i class="icon-spinner icon-spin orange bigger-125"></i>
        </div>
        <!--查询结束-->
        <!--重置开始-->
        <div class="" ></div>
        <!--重置结束-->
        
        <!--查看开始-->
          <div class="clishow" >
            	<div class="kong"><span class="spa">查看信息</span></div>
                <div class="divbg">
                    <ul class="firstsy clearfix">
                        <li class="clearfix addsearbtt">
                        <span class="mssms">用户名：</span>
                        <input name="" type="text" readonly="true" class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">手机号码：</span>
                        <input name="" type="text" readonly="true" class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">推荐码：</span>
                        <input name="" type="text" readonly="true" class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">真实姓名：</span>
                        <input name="" type="text" readonly="true" class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">身份证号码：</span>
                        <input name="" type="text" readonly="true" class="allinp momsd" />
                    </li>
                    </ul>
                </div>
                 <div class="lastbt bigtitoms">
                    <span>
                        <input name="" type="button" value="确定" class="btn btn-warning rewirtin" />
                        <input name="" type="button" value="取消" class="btn rewirtin inpright" />
                    </span>
                 </div>
            </div>
        <!--查看结束--> 
        
        <!--下载Excel开始-->  
          <div class="" ></div>
        <!--下载Excel结束-->
        <!--新增开始-->
          <div class="clishow" >
            	<div class="kong"><span class="spa">查看信息</span></div>
                <div class="divbg">
                    <ul class="firstsy clearfix">
                        <li class="clearfix addsearbtt">
                        <span class="mssms">用户名：</span>
                        <input name="" type="text"  class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">手机号码：</span>
                        <input name="" type="text"  class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">推荐码：</span>
                        <input name="" type="text"  class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">真实姓名：</span>
                        <input name="" type="text"  class="allinp momsd" />
                    </li>
                    <li class="clearfix addsearbtt">
                        <span class="mssms">身份证号码：</span>
                        <input name="" type="text"  class="allinp momsd" />
                    </li>
                    </ul>
                </div>
                 <div class="lastbt bigtitoms">
                    <span>
                        <input name="" type="button" value="确定" class="btn btn-warning rewirtin" />
                        <input name="" type="button" value="取消" class="btn rewirtin inpright" />
                    </span>
                 </div>
            </div>
        <!--新增结束--> 
        <!--删除开始-->  
          <div class="" ></div>
        <!--删除结束-->
        </div>

<script type="text/javascript" src="../../../framework/assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../../framework/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../framework/assets/js/bootstrapDatepickr-1.0.0.min.js"></script>
<script type="text/javascript" src="../../../global/js/assets/sortable.min.js"></script>
<script type="text/javascript" src="../../../global/js/assets/laydate/laydate.js"></script>
<script type="text/javascript" src="../../../global/js/assets/jquery.page.js"></script>
<script type="text/javascript" src="../../../global/js/assets/index.js"></script>
<script src="../../../framework/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="../../../framework/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="../../../framework/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
<script src="../../../framework/assets/js/ace-elements.min.js"></script>
<script src="../../../framework/assets/js/ace.min.js"></script>

<script type="text/javascript">
			var grid_data = 
			[ 
				{id:"1",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"2",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"3",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"4",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"5",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
				{id:"6",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"7",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"8",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"9",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"10",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"11",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"12",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"13",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"14",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
				{id:"15",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"16",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
				{id:"17",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"18",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"19",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
				{id:"20",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
				{id:"21",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
				{id:"22",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
				{id:"23",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"}
			];	
			
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
			
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
					
					data: grid_data,
					datatype: "local",
					height: 300,
					colNames:[' ', 'ID','Last Sales','Name', 'Stock', 'Ship via','Notes'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						{name:'id',index:'id', width:60, sorttype:"int", editable: true},
						{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
						{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
						{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} 
					], 
			
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					editurl: $path_base+"/dummy.html",//nothing is saved
					caption: "",
			
			
					autowidth: true
			
				});
			
				//enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
			
				//switch element when editing inline
				function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
								.wrap('<label class="inline" />')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}
				//enable datepicker
				function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				}
			
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: false,
						editicon : 'icon-pencil blue',
						add: false,
						addicon : 'icon-plus-sign purple',
						del: false,
						delicon : 'icon-trash red',
						search: false,
						searchicon : 'icon-search orange',
						refresh: false,
						refreshicon : 'icon-refresh green',
						view: false,
						viewicon : 'icon-zoom-in grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//delete record form
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							
							form.data('styled', true);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				)
			
			
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
						.end().find('input[name=stock]')
							  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').remove();
					buttons.eq(0).append('<i class="icon-chevron-left"></i>');
					buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
					buttons.eq(1).prepend('<i class="icon-remove"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			
				$(document).ready(function() {
					$("#calendar").bootstrapDatepickr();
					$("#calendar1").bootstrapDatepickr();
				});
			});
		</script>
</body>
</html>
